import React, { Component } from "react";
import {Row, Timeline, Menu, Dropdown, Popconfirm} from "antd";
import RecordDetail from "./RecordDetail";
import styles from "./ProcessRecord.less";

// const mockStep = 2;
// const Status = {
//   NORMAL: "正常",
//   WARNING: "预警",
//   TIMEOUT: "超时",
//   END: "终止",
//   PAUSE: "暂停",
//   RECALL: "撤销",
//   ERROR: "错误",
// };

class SecondProcessRecord extends Component {
  state = {
    visible: false,
    activityId: "",
    taskId: null,
  };

  constructor(props) {
    super(props);
    this.renderItem = this.renderItemWithCurrentId.bind(this, this.onDetail);
  }

  renderHandle = (onDetail, item) => {
    const {
      handleTaskVisible,
      customFormVisible,
      actype,
      nodeAuth,
    } = this.props;

    let showMore = false;
    if (nodeAuth) {
      showMore =
        nodeAuth.addSignature ||
        nodeAuth.delay ||
        nodeAuth.signIn ||
        nodeAuth.transfer;
    }

    const Detail = (
      <span className={styles.detail} onClick={() => onDetail(item)}>
        详情
      </span>
    );

    const menu = showMore ? (
      <Menu>
        {nodeAuth.signIn && (
          <Menu.Item>
            <span
              onClick={() => {
                handleTaskVisible("signVisible", true, item.taskId);
              }}
            >
              签收
            </span>
          </Menu.Item>
        )}
        {nodeAuth.addSignature && (
          <Menu.Item>
            <span
              onClick={() => {
                handleTaskVisible("addSignVisible", true, item.taskId);
              }}
            >
              加签
            </span>
          </Menu.Item>
        )}
        {nodeAuth.transfer && (
          <Menu.Item>
            <span
              onClick={() => {
                handleTaskVisible("transferVisible", true, item.taskId);
              }}
            >
              转办
            </span>
          </Menu.Item>
        )}
        {nodeAuth.delay && (
          <Menu.Item>
            <span
              onClick={() => {
                handleTaskVisible("delayVisible", true, item.taskId);
              }}
            >
              延期
            </span>
          </Menu.Item>
        )}
      </Menu>
    ) : null;

    const handleAndMore = (
      <>
        <span
          className={styles.detail}
          onClick={() => customFormVisible(true, item)}
        >
          处理
        </span>
        {showMore && (
          <Dropdown overlay={menu} placement="bottomRight">
            <span className={styles.detail}>更多</span>
          </Dropdown>
        )}
      </>
    );

    if (actype === "todo") {
      if (
        item.nodeAuthShow &&
        item.taskStatus === "TODO" &&
        !item.multiInstance
      ) {
        return handleAndMore;
      } else if (item.taskId && !item.multiInstance) {
        return Detail;
      }
    } else if (actype !== "todo") {
      if (item.taskId && !item.multiInstance) {
        return Detail;
      }
    }
  };

  renderItemWithCurrentId = (onDetail, item, index) => {
    // const statusClassName = item.status === "NORMAL" ? "" : styles.error;
    const { reissueTaskIDs, takeBackTaskIDs, handleTakeBack, handleReissue } = this.props;
    return (
      <Timeline.Item
        key={index}
        color={item.approval === "通过" ? "blue" : "#d9d9d9"}
      >
        <div className={styles.desc}>
          <span style={{ width: "170px" }}>{item.taskNodeTime}</span>

          {item.taskNodeType === "node" ? (
            <>
              <span style={{ width: "220px" }}>
                <span className={styles.mr16}>
                  处理状态：
                  {item.taskStatus === "DONE" ? "已处理" : "待处理"}
                </span>
                {/* <span className={statusClassName}>{Status[item.status]}</span> */}
              </span>
              {/* {(item.approval || isDealFinish === 0) && (
                <span>
                  <span className={styles.mr16}>审批结果</span>
                  <span>{item.approval || "跳过"}</span>
                </span>
              )} */}
            </>
          ) : null}
          <span style={{ width: "460px" }}>{`处理人：${item.operator}`}</span>


          {takeBackTaskIDs && Array.isArray(takeBackTaskIDs) && takeBackTaskIDs.indexOf(item.taskId) !== -1 ? (

            <Popconfirm
              title="确定拿回吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => handleTakeBack(item.taskId)}
            >
              <span className={styles.detail}>拿回</span>
            </Popconfirm>

          ) : (
            <span
              className={styles.detail}
            />
          )}

          {reissueTaskIDs && Array.isArray(reissueTaskIDs) && reissueTaskIDs.indexOf(item.taskId) !== -1 ? (

            <span
              className={styles.detail}
              onClick={() => {
                handleReissue(item.taskId);
              }}
            >
              补发
            </span>

          ) : (
            <span
              className={styles.detail}
            />
          )}

          {this.renderHandle(onDetail, item)}

          {/* {item.taskId && (
            <span className={styles.detail} onClick={() => onDetail(item)}>
              详情
            </span>
          )} */}
        </div>
      </Timeline.Item>
    );
  };

  onDetail = ({ activityId, taskId }) =>
    this.setState({
      activityId,
      visible: true,
      taskId,
    });

  render() {
    const { visible, activityId, taskId } = this.state;
    const { data = [] } = this.props;
    return (
      <Row className={styles.root}>
        <Timeline>
          {/* mockData.map(this.renderItem) */}
          {data.length && data.map(this.renderItem)}
        </Timeline>
        <RecordDetail
          activityId={activityId}
          taskId={taskId}
          onCancel={() => this.setState({ visible: false })}
          processInstanceId="bd27177ddaa711e9b3be005056a0b338"
          visible={visible}
        />
      </Row>
    );
  }
}

export default SecondProcessRecord;
